<template>
    <a-form layout="inline" :model="form" ref="ruleFormRef">
        <a-row>
            <!-- 外采流程中的外采验收 -->
            <a-col :span="16" v-if="stage === '外采验收'">
                <a-form-item label="更新包" :span="24" name="files" :rules="ruleObj['更新包']">
                    <file-cell :fileList="getFilterFiles(form.files, '更新包')" :detail="detail" v-if="disabled" />
                    <upload-cell :detail="detail" :fileParams="{ connectType: '更新包', type: 1, systemName: detail.systemName, versionNumber: detail.versionNumber }" :fileList="getFilterFiles(form.files, '更新包')" @valueChange="fileChange($event, '更新包')" placeholder="支持：.rar .zip  .jpg..." v-else />
                </a-form-item>
            </a-col>
            <a-col :span="16" v-if="stage === '外采验收'">
                <a-form-item label="需求文档" :span="24" name="files">
                    <file-cell :fileList="getFilterFiles(form.files, '需求文档')" v-if="disabled" />
                    <upload-cell :fileParams="{ connectType: '需求文档', type: 1 }" :fileList="getFilterFiles(form.files, '需求文档')" @valueChange="fileChange($event, '需求文档')" v-else>
                        <template #extra>
                            <span class="caption-font-color">提示：请上传需求交付说明</span>
                            <a @click="downTemplate('requiredelivery')">下载模板</a>
                        </template>
                    </upload-cell>
                </a-form-item>
            </a-col>
            <!-- 自研流程中的需求研发 -->
            <a-col :span="16" v-if="stage === '需求研发'">
                <a-form-item label="排期" :span="24">
                    <file-cell :fileList="form.files" v-if="disabled" />
                    <upload-cell :fileParams="{ connectType: '排期', type: 1 }" :fileList="form.files" @valueChange="fileChange($event, '排期')" v-else />
                </a-form-item>
            </a-col>
            <!-- 需求基线 -->
            <a-col :span="16" v-if="stage === '确定需求基线'">
                <a-form-item label="排期" :span="24">
                    <file-cell :fileList="getFilterFiles(form.files, '排期')" v-if="disabled" />
                    <upload-cell :fileParams="{ connectType: '排期', type: 1 }" :fileList="getFilterFiles(form.files, '排期')" @valueChange="fileChange($event, '排期')" v-else />
                </a-form-item>
            </a-col>
            <a-col :span="16" v-if="stage === '确定需求基线'">
                <a-form-item label="需求文档" :span="24" name="files" :rules="ruleObj['需求文档']">
                    <file-cell :fileList="getFilterFiles(form.files, '需求文档')" v-if="disabled" />
                    <upload-cell :fileParams="{ connectType: '需求文档', type: 1 }" :fileList="getFilterFiles(form.files, '需求文档')" @valueChange="fileChange($event, '需求文档')" v-else />
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang="ts">
import { useDownFile } from '@/hooks/common/useFile';
import { UploadCell, FileCell } from '@/components';
import { validateFileValidator } from '@/utils/validator';
import { FileItem } from '@/types';
import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'StartProcess',
    components: {
        UploadCell,
        FileCell
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        disabled: { type: Boolean, default: false },
        stage: { type: String, default: '' },
        stepStatus: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        const { downTemplate } = useDownFile();
        const state = reactive<any>({
            form: {
                files: []
            }
        });
        const getFilterFiles = (list: FileItem[], connectType: string) => {
            return list.filter((item) => item.connectType === connectType);
        };
        const ruleObj = computed(() => {
            const ruleObj = {
                更新包: [{ required: true, message: '更新包不能为空', validator: validateFileValidator, connectType: '更新包', trigger: 'blur', type: 'array' }],
                需求文档: [{ required: true, message: '需求文档不能为空', validator: validateFileValidator, connectType: '需求文档', trigger: 'blur', type: 'array' }],
                排期: [{ required: true, message: '排期文档不能为空', validator: validateFileValidator, connectType: '排期', trigger: 'blur', type: 'array' }]
            };
            return props.disabled ? { 更新包: {}, 需求文档: {}, 排期: {} } : ruleObj;
        });
        // 监听文件删除等操作
        const fileChange = (fileList: FileItem[], connectType: string) => {
            const files = state.form.files.filter((item) => item.connectType !== connectType);
            state.form.files = [...files, ...fileList];
            // 修改文档后立即保存
            emit('detailChange', {
                files: state.form.files
            });
        };
        const init = () => {
            const { files } = props.detail;
            // state.form.testName = '';
            if (files && files.length) {
                if (props.stage === '外采验收') {
                    state.form.files = files.filter((item) => ['更新包', '需求文档'].includes(item.connectType));
                } else if (props.stage === '需求研发') {
                    state.form.files = files.filter((item) => item.connectType === '排期');
                } else {
                    if (files && files.length) {
                        state.form.files = files.filter((item) => ['需求文档', '排期'].includes(item.connectType));
                    }
                }
            }
        };
        init();
        watch(
            () => props.detail.files,
            (n, o) => {
                // 如果最开始是禁用，则无需调用查询接口
                if (JSON.stringify(n) !== JSON.stringify(o)) {
                    init();
                }
            },
            {
                deep: true
            }
        );
        return {
            ...toRefs(state),
            getFilterFiles,
            ruleObj,
            fileChange,
            downTemplate
        };
    }
});
</script>

<style scoped lang="less">
@import '../styles/index.less';
</style>